<template>
    <div id="search">
        <el-form :inline="true" v-model="queryParam" class="demo-form-inline">
            <el-form-item label="UUID" property="uuid">
                <el-input v-model="queryParam.uuid" placeholder="通过UUID搜索" clearable />
            </el-form-item>
            <el-form-item label="用户UUID" property="userUuid">
                <el-input v-model="queryParam.userUuid" placeholder="通过用户UUID搜索" clearable />
            </el-form-item>
            <el-form-item label="用户名" property="username">
                <el-input v-model="queryParam.username" placeholder="通过用户名搜索" clearable />
            </el-form-item>
            <el-form-item label="用户昵称" property="userDisplayName">
                <el-input v-model="queryParam.userDisplayName" placeholder="通过用户昵称搜索" clearable />
            </el-form-item>
            <el-form-item label="内容" property="content">
                <el-input v-model="queryParam.content" placeholder="通过内容搜索" clearable />
            </el-form-item>
            <el-form-item label="回复邮箱" property="replyEmail">
                <el-input v-model="queryParam.replyEmail" placeholder="通过邮箱搜索" clearable />
            </el-form-item>
            <el-form-item label="客户端" property="askClient">
                <el-input v-model="queryParam.askClient" placeholder="通过客户端" clearable />
            </el-form-item>
            <el-form-item label="主机名" property="askHostname">
                <el-input v-model="queryParam.askHostname" placeholder="通过主机名搜索" clearable />
            </el-form-item>
            <el-form-item label="IP地址" property="askIp">
                <el-input v-model="queryParam.askIp" placeholder="通过IP搜索" clearable />
            </el-form-item>

            <el-form-item style="width: 15%" label="回复状态">
                <el-select v-model="queryParam.answerState" placeholder="回复状态" clearable>
                    <el-option label="已回复" value="REPLIED" />
                    <el-option label="未回复" value="NO_REPLY" />
                </el-select>
            </el-form-item>
            <el-form-item label="时间">
                <div class="block">
                    <el-date-picker type="datetimerange" value-format="YYYY-MM-DD HH:MM:ss"
                        v-model="queryParam.dateTime" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="clear">清空</el-button>
            </el-form-item>
        </el-form>
        <div>
            <el-pagination v-model:current-page=queryParam.page v-model:page-size=queryParam.pageSize
                :page-sizes="[5, 10, 20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total=total
                @size-change="query" @current-change="query" />
        </div>
    </div>
    <div id="content">
        <el-table style="width: 100%" :data="asks">
            <el-table-column property="askTime" label="时间" width="auto" />
            <el-table-column property="uuid" label="UUID" width="auto" />
            <el-table-column property="userUuid" label="用户UUID" width="auto" />
            <el-table-column property="username" label="用户名" width="auto" />
            <el-table-column property="userDisplayName" label="昵称" width="auto" />
            <el-table-column property="content" label="内容" width="auto" />
            <el-table-column property="askIp" label="IP" width="auto" />
            <el-table-column property="askClient" label="客户端" width="auto">
                <template #default="scope">
                    <el-tag v-if="scope.row.askClient === null" type="warning">未知</el-tag>
                    <el-tag v-if="scope.row.askClient === ''" type="warning">未知</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="askHostname" label="主机名" width="auto">
                <template #default="scope">
                    <el-tag v-if="scope.row.askHostname === null" type="warning">未知</el-tag>
                    <el-tag v-if="scope.row.askHostname === ''" type="warning">未知</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="answerState" label="状态" width="auto">
                <template #default="scope">
                    <el-tag v-if="scope.row.answerState === 'REPLIED'" type="success">已回复</el-tag>
                    <el-tag v-if="scope.row.answerState === 'NO_REPLY'" type="danger">未回复</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="replyEmail" label="邮箱" width="auto" />
            <el-table-column fixed="right" label="操作" min-width="auto">
                <template #default="scope">
                    <div>
                        <el-button link type="primary" size="big" @click="getAsk(scope.row.uuid)">详情</el-button>
                    </div>
                    <div>
                        <el-button link type="primary" size="big" @click="editAsk(scope.row.uuid)">编辑</el-button>
                    </div>
                    <div>
                        <el-button link type="danger" size="big" @click="deleteAsk(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div>
        <el-dialog v-model="infoVisible" title="详情" width="50%" draggable>

            <div>
                <el-card style="max-width: 100%">
                    <template #header>
                        <div class="card-header">
                            <el-tag type="success">提问</el-tag>-
                            <el-tag v-if="info.answerState === 'REPLIED'" type="success">已回复</el-tag>
                            <el-tag v-if="info.answerState === 'NO_REPLY'" type="danger">未回复</el-tag>
                        </div>
                    </template>
                    <el-text class="mx-1" type="primary">{{ info.replyEmail }}</el-text>
                    <p>{{ info.content }}</p>
                    <template #footer>{{ info.askTime }}</template>
                </el-card>
                <el-card style="max-width: 100%" v-if="info.answerState === 'REPLIED'">
                    <template #header>
                        <div class="card-header">
                            <el-tag type="warning">回复</el-tag>
                        </div>
                    </template>
                    <p>{{ answer.content }}</p>
                    <template #footer>{{ answer.answerTime }}</template>
                </el-card>
            </div>
            <template #footer="scope">
                <div align="center" class="dialog-footer">
                    <el-button type="primary" @click="infoVisible = false">
                        取消
                    </el-button>
                    <el-button type="warning" @click="editAsk(info.uuid)">
                        编辑
                    </el-button>
                    <el-button type="danger" @click="deleteAsk(this.editInfo)">
                        删除
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <div>
        <el-dialog v-model="editVisible" title="编辑" width="50%" draggable>

            <div>
                <el-form :model="editInfo" label-width="auto" style="max-width: 600px">
                    <el-form-item label="回复邮箱">
                        <el-input v-model="editInfo.replyEmail" />
                    </el-form-item>
                    <el-form-item label="提问内容">
                        <el-input v-model="editInfo.content" type="textarea" :rows="10" :autoSize="true" />
                    </el-form-item>
                </el-form>
            </div>
            <div align="center" class="dialog-footer">
                <el-button type="success" @click="updateAsk">
                    更新
                </el-button>
                <el-button type="danger" @click="editVisible = false">
                    取消
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { updateAskByUuid, getAsks, getAskByUuid } from '@/api/console/ask';
import { getAnswerByAskUuid } from '@/api/console/answer';
import { ElMessage, ElMessageBox } from 'element-plus'
import { watch } from 'vue';
export default {
    data() {
        return {
            total: 0,
            asks: [],
            queryParam: {
                page: 1,
                pageSize: 10,
                uuid: null,
                userUuid: null,
                username: null,
                userDisplayName: null,
                askIp: null,
                askClient: null,
                askHostname: null,
                replyEmail: null,
                answerState: null,
                dateTime: null,
                askTimeBegin: null,
                askTimeEnd: null,
                content: null
            },
            infoVisible: false,
            editVisible: false,
            info: {
                uuid: null,
                userUuid: null,
                username: null,
                userDisplayName: null,
                askIp: null,
                askClient: null,
                askHostname: null,
                replyEmail: null,
                answerState: null,
                askTime: null,
                content: null
            },
            answer: {
                uuid: null,
                askUuid: null,
                content: null,
                answerTime: null
            },
            editInfo: {
                uuid: null,
                replyEmail: null,
                answerState: null,
                state: null,
                content: null
            }

        }
    },
    methods: {
        query: function () {
            getAsks(this.queryParam).then(res => {
                this.total = res.data.total
                this.asks = res.data.rows
                this.asks.forEach(e => {
                    let content = e.content
                    if (content.length > 10) {
                        e.content = content.substring(0, 10) + '...'
                    }
                });
            })
        },
        clear: function () {
            this.queryParam = {
                page: 1,
                pageSize: 10,
                uuid: null,
                userUuid: null,
                username: null,
                userDisplayName: null,
                askIp: null,
                askClient: null,
                askHostname: null,
                replyEmail: null,
                answerState: null,
                askTimeBegin: null,
                askTimeEnd: null,
                content: null
            }
        },
        getAsk: function (uuid) {
            this.infoVisible = true
            this.info.uuid = uuid
            getAskByUuid(uuid).then(res => {
                this.info = res.data
                this.getAnswer(uuid)
            })
        },
        getAnswer: function (uuid) {
            getAnswerByAskUuid(uuid).then(res => {
                this.answer = res.data
            })
        },
        editAsk: function (uuid) {
            this.editVisible = true
            getAskByUuid(uuid).then(res => {
                this.editInfo = res.data
            })
        },
        updateAsk: function () {
            updateAskByUuid(this.editInfo).then(res => {
                this.editVisible = false
                this.query()
                this.getAsk(this.editInfo.uuid)
                ElMessage.success('更新成功')
            }).catch(e => {
                ElMessage.error(res.msg)
            })
        },
        deleteAsk: function (ask) {
            ElMessageBox
                .confirm(
                    '是否要删除这条数据，删除后用户无法看到这条提问，您可以从回收站中恢复它',
                    '警告',
                    {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).then(() => {
                    ask.state = 'DELETED'
                    updateAskByUuid(ask).then(res => {
                        this.query()
                        this.infoVisible = false
                        ElMessage.success('删除成功')
                    }).catch(e => {
                        ElMessage.error(res.msg)
                    })
                }).catch(() => {
                    ElMessage.info('已取消删除')
                })
        }
    },
    mounted() {
        this.query()
    },
    watch: {
        'queryParam.dateTime': {
            handler(newVal, oldVal) {
                if (newVal.length > 0) {
                    this.queryParam.askTimeBegin = newVal[0]
                    this.queryParam.askTimeEnd = newVal[1]
                }
                this.query()
            }
        }
    }
}



</script>

<style></style>